<template>
    <div id='report-index'>
        <h1 class="card-title">
           <!--  <p><span>{{$route.params.name}} 事件详情</span> --><i class='card-sub-title'>数据更新时间：</i></p>
            <div class="card-title__button-box">
                <div class="form-content">
                    <div class="form-item">
                        <div class="form-item__key">日期</div>
                        <div class="form-item__value">
                            <date-picker
                                v-model="date"
                                @select='getData()'
                                color='#757575'
                                :placeholder='`选择日期`'></date-picker>
                        </div>
                    </div>
                </div>
                <a class="card-title__button" @click='showModalDetail("","事件数据趋势")'>查看数据趋势</a>
            </div>
        </h1>
        <div class="loading-min-height">
            <loading v-if='loading' mode='full'></loading>
            <transition name='fade'>
                <div class='main-content no-margin-top' v-if='!loading && data'>
                    <div class="main-content__title">数据详情</div>
                    <p class='no-data' v-if='!loading && !list.length'>暂无数据</p>
                    <div class="table-list" v-if='list.length'>
                        <table>
                            <thead class="table-list__head">
                                <tr>
                                    <th>应用名称</th>
                                    <th v-if='$route.params.name == "register"'>状态</th>
                                    <th v-else>Tab项</th>
                                    <th>昨日新增设备</th>
                                    <th>昨日新增用户</th>
                                    <th>昨日上报次数</th>
                                    <th>昨日上报用户</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody class='table-list__body have-border'>
                                <template v-for='pitem in list'>
                                    <tr v-for='(item,index) in pitem.appValueList'>
                                        <td :rowspan="pitem.appValueList.length" v-if='index == 0'>{{ pitem.appName || placeholder }}</td>
                                        <td>{{ item.name || placeholder }}</td>
                                        <td>{{ item.deviceCount || placeholder }}</td>
                                        <td>{{ item.userCount || placeholder }}</td>
                                        <td>{{ item.tabCount || placeholder }}</td>
                                        <td>{{ item.tabUserCount || placeholder }}</td>
                                        <td>
                                            <div class='option-box'>
                                                <span class='option-button'  @click='showModalDetail(item,`【${item.eventName}】数据趋势`)'>查看数据趋势</span>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </transition>
        </div>


        <modal  
            :show='show_reportDetail' 
            :title='modalTitle' 
            :width='1200'
            cancle-text='' 
            confirm-text=''
            @close='show_reportDetail=false'>
            <tab-box @tab-click='setDays'>
                <tab name='7天'></tab>
                <tab name='30天'></tab>
                <tab name='60天'></tab>
            </tab-box>
            <div class="loading-min-height">
                <loading v-if='loading_chart' mode='full'></loading>
                <echarts id='user-charts' v-if='!loading_chart && show_reportDetail && chartOptions' :options="chartOptions"></echarts>
            </div>
        </modal>        
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                chartData:'',
                data:'',
                myChart:'',
                chartOptions:'',
                placeholder:'--',
                loading_chart:false,
                show_reportDetail:false,
                recommend:0,
                modalTitle:'',
                name:'',
                status:{
                    value:'',
                    text:'所有类型'
                },
                trend:[],
                curDetail:{},
                list:[],
                listInfo:{},
                records:[],
                date:'',
                dateFrom:'',
                dateTo:'',
                mobile:'',
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasListInfo(){
                if(_.isEmpty(this.listInfo)) return false
                return true
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            },
            dailyList(){
                if(this.trend.length) return _.orderBy(this.trend,'logDate')
                return []
            },
            allDate(){
                if(this.dailyList.length) return _.map(this.dailyList,'logDate') 
                return []
            },
            userCount(){
                if(this.dailyList.length) return _.map(this.dailyList,'userCount') 
                return []
            },
            deviceCount(){
                if(this.dailyList.length) return _.map(this.dailyList,'deviceCount') 
                return []
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            showModalDetail(item,title){
                let name 
                let appName
                if(item){
                    name = item.name
                    appName = item.appName
                }
                this.modalTitle = title
                this.getTrend(name,appName)
                this.loading_chart - true
                this.show_reportDetail = true
            },
            getData(num){
                this.loading = true
                // if(this.$route.params.name == 'Tab_c_i'){
                    youxinApi.tabData({
                        eventName:this.$route.params.name
                    })
                    .then(result=>{
                        this.loading = false
                        this.data = result
                        this.list = result.detailList
                    })
                    .catch(error => {
                        console.error(error)
                        this.loading = false
                    })  
                // }
            },
            getTrend(name,appName){
                this.loading_chart = true
                youxinApi.detailTrend({
                    event:this.$route.params.name,
                    appName:appName,
                    name:name,
                    date:this.date
                })   
                .then(result=>{
                    this.loading_chart = false
                    this.trend = result
                    this.setChart()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_chart = false
                })
            },
            setChart(){
                this.chartOptions = {
                    // animation:false,
                    title: {
                        //text: '2000-2016年中国汽车销量及增长率'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['新增设备','新增用户']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: this.allDate
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '',
                        position: 'left'
                    }],
                    dataZoom: [{
                        startValue: moment().subtract(7, 'days').format('YYYY-MM-DD')
                    },{
                        throttle:0,
                        type: 'inside'
                    }],
                    // animationDuration: function (idx) {
                    //     // 越往后的数据延迟越大
                    //     return idx * 300;
                    // },
                    series: [ {
                        name: '新增设备',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.deviceCount
                    }, {
                        name: '新增用户',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.userCount
                    }]
                }
            },
            setDays(index){
                let days
                if(index === 0) days = 7
                else if(index === 1) days = 30
                else if(index === 2) days = 60

                this.chartOptions.dataZoom = [{
                    startValue: moment().subtract(days, 'days').format('YYYY-MM-DD')
                }, {
                    type: 'inside'
                }]
            },
        },
        created(){
            // this.getAccount()
            this.getData()
            // this.getTrend()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #report-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .loading-min-height{
            min-height:300px;
        }
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
    }
</style>
